<template>
<view class="content">
    <view class="bottom-controls"><!-- 底部控制按钮组容器 -->
		<view class="combined-buttons"><!-- 主按钮组区域（带背景色）- 合并play和stop按钮背景 -->
		  <!-- Play按钮 -->
		  <view class="control-button play-button" @click="handle('play')">
			<view class="iconfont icon-play"/>
		  </view>
		  <!-- Stop按钮 -->
		  <view class="control-button stop-button" @click="handle('stop')">
			<view class="iconfont icon-pause1"/>
		  </view>
		</view>
		<!-- List按钮（无背景色，偏小） -->
		<view class="list-button " @click="handle('list')">
		 <view class="iconfont icon-list"/>
		</view>
	</view>
</view>
  
</template>

<script setup>
	
	// 定义组件的emit事件
	const emit = defineEmits(['handle'])
	//按钮点击处理函数
	const handle = (n) => {
	  emit("handle",n)
	}
</script>

<style scoped>
.content{
	/* 固定定位在视口底部 */
	position: fixed;
	left: calc(50% - 25vw - 10px);
	bottom: 5px;
}
/* 底部控制按钮组容器 - 移动端优化 */
.bottom-controls {    
  width: 50vw;
  border-radius: 9999px; /* 圆角效果 */
	/* 水平居中内容 */
  display: flex;
  padding: 5px 5px 6px ;
  margin: 10px;
  /* 毛玻璃效果 */
  background: var(--p-color);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* 顶部阴影效果 */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
  /* 安全区域适配（移动端） */
  z-index: 1000; /* 确保在最上层 */
}

/* 合并按钮背景容器 */
.combined-buttons {
  display: flex;
  width: 100%;
  border-radius: 9999px; /* 圆角效果 */
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

/* 控制按钮基础样式 - 移动端优化 */
.control-button {
  width: 100%;
  height: 45px;
  background-color: var(--f-color);
  margin: 0 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #fff;
  /* 触摸反馈优化 */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Play按钮特定样式 */
.play-button {
  border-radius: 9999px 0 0 9999px; /* 左半圆角 */
}

/* Stop按钮特定样式 */
.stop-button {
  border-radius: 0 9999px 9999px 0; /* 右半圆角 */

}

/* 按钮点击效果 - 移动端优化 */
.control-button:active {
  background-color: #58f900;
  box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.3);
}
/* List按钮样式（偏小，无背景色） - 移动端优化 */
.list-button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
  width: 5%;
}
</style>